<template>
	<view>
		<view class="tab">
			<scroll-view scroll-y class="box">
				<view class="tab-title">
					<text @click="handleChangeActiveIndex(index)" :class="index === activeIndex ? 'active': ''"
						v-for="(item, index) in tabData" :key="index">{{ item.title }}</text>
				</view>
			</scroll-view>
			<scroll-view class="tab-content" scroll-y :scroll-top="scrollTop" scroll-with-animation>
				<view class="item" v-for="(item, index) in tabData" :key="index">
					<view class="title">{{ item.title }}</view>
					<view class="content" v-for="(item, index) in item.children" :key="index" @click="toDetail(item)">
						<view class="left">
							<image :src="item.image" lazy-load></image>
						</view>
						<view class="right">
							<view class="con-title">{{ item.title }}</view>
							<view class="desc">{{ item.desc }}</view>
							<view class="price">{{ item.price }}</view>
						</view>
					</view>
				</view>
			</scroll-view>

			
		</view>
		<view class="btm">
			<view class="car" v-show="show">1231231</view>
			<view class="con">
				<view>
					<text @click="show=!show">图标：{{ 11 }}</text>
					<radio value="" /><text>全选</text>
				</view>
				<view>
					总价： {{ 1100 }}
				</view>
			</view>
		</view>
	</view>
</template>


<script>
	export default {
		data() {
			return {
				tabData: [],
				activeIndex: 0,
				scrollTop: 0,
				nodes: [],
				show: false
			}
		},
		methods: {
			async getTabData() {
				const resp = await uni.request({
					url: 'http://localhost:3000/tabData'
				})
				this.tabData = resp.data;

				// 保存节点信息
				this.$nextTick(() => {
					console.log(123);
					const query = uni.createSelectorQuery().in(this);
					query.selectAll('.item').boundingClientRect(nodes => {
						this.nodes = nodes
					}).exec();
				})
			},

			handleChangeActiveIndex(index) {
				// 更新下标
				this.activeIndex = index
				// 右侧跳转
				this.scrollTop = this.nodes[index].top
			},

			toDetail(item) {
				const params = Object.entries(item).map(([key, value]) => `${key}=${value}`).join('&')
				uni.navigateTo({
					url: '/pages/detail/detail?' + params
				})
			}

		},
		onLoad() {
			this.getTabData()
		}
	}
</script>

<style lang="scss" scoped>
	
	.btm {
		position: fixed;
		bottom: 100rpx;
		left: 0%;
		background-color: white;
		width: 100%;
		.car {
		}
		.con {
			display: flex;
			justify-content: space-between;
			padding: 0 10rpx;
			align-items: center;
			height: 100rpx;
		}
	}
	
	.tab {
		display: flex;

		.box {
			height: calc(100vh - 50px);
			width: 120rpx;

			.tab-title {
				display: flex;
				flex-direction: column;
				align-items: center;
				width: 100%;
				// background-color: red;
				border-right: 1rpx solid #ccc;

				text {
					margin: 20rpx 0;

					&.active {
						color: red;
						font-weight: bold;
					}
				}
			}
		}

		.tab-content {
			flex: 1;
			height: calc(100vh - 50px);

			// background-color: skyblue;
			.item {
				padding: 10rpx;
				border-bottom: 1rpx solid #ccc;

				.content {
					display: flex;

					.left {
						width: 240rpx;
						height: 160rpx;
						flex-shrink: 0;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.right {
						margin-left: 6rpx;
						display: flex;
						flex-direction: column;
						justify-content: space-around;
					}
				}
			}
		}
	}
</style>